@use '../core' as *;

.imageCaption {
    display: flex;
    flex-direction: column;
    margin: $spacing-size-4 $spacing-size-6 $spacing-size-2;

    .image {
        max-width: 100%;
    }
}

.imageCaption.centered {
    margin-right: auto;
    margin-left: auto;

    .image {
        display: block;
        margin-right: auto;
        margin-left: auto;
    }
}

.imageCaption.constrained {
    max-width: 100%;
}

.body {
    padding: $spacing-size-4;

    &.top {
        padding: $spacing-size-1;
    }
}

.bodyText {
    white-space: nowrap;
}

#{$selector-darkmode} .imageCaption.darkmodeFilter {
    filter: invert(1) hue-rotate(180deg) saturate(1.25);
    mix-blend-mode: screen;
}
